<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/goods_details.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <!--星星-->
	<script src="../js/jquery.raty.min.js"></script>
</head>
<body>
	<!--顶部带返回导航-->
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">商品详情</h1>
	</header>
    <!-- 商品banner -->
	<div class="doods-banner">
        <div class="swiper-container">
		    <ul class="swiper-wrapper">
		        <li class="swiper-slide"><img src="../images/goods_details_banner.png" alt="" /></li>
		        <li class="swiper-slide"><img src="../images/goods_details_banner.png" alt="" /></li>
		        <li class="swiper-slide"><img src="../images/goods_details_banner.png" alt="" /></li>
		        <li class="swiper-slide"><img src="../images/goods_details_banner.png" alt="" /></li>
		        <li class="swiper-slide"><img src="../images/goods_details_banner.png" alt="" /></li>
		    </ul>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		</div>
    </div>
    <!--说明-->
    <div class="goods">
    	<ul class="mui-table-view goods-title">
		    <li class="mui-table-view-cell">
		    	<div class="mui-pull-left">
		    		<p class="mui-ellipsis">苏泊尔炒锅少油烟不粘锅</p>
					<p><strong><i class="fa fa-rmb"></i>299</strong><del><i class="fa fa-rmb"></i>308</del></p>
		    	</div>
		    	<div class="mui-pull-right"  onclick="collect(this)">
		    		<i class="mui-icon iconfont icon-wujiaoxing1" id="collect"></i>
					<p>收藏</p>
		    	</div>
		    </li>
		    <li class="mui-table-view-cell"></li>
		</ul>
		<ul class="mui-table-view goods-number">
		    <li class="mui-table-view-cell">
		    	<div class="goods-number-wrap">
			    	<span class="product-number">商品数量</span>
					<button class="lower" id='lower'><i class="mui-icon iconfont icon-jian"></i></button>
					<input type="number" value="1" class="number-input" id="number"/>
					<button class="add" id='add'><i class="mui-icon iconfont icon-jia"></i></button>
					<span class="reseve">库存<strong id="reseve">66</strong>件</span>
				</div>
		    </li>
		    <li class="mui-table-view-cell"></li>
		</ul>
    </div>
    <!--商品详情与商品评价-->
    <div class="goods-content-wrap">
	    <div class="mui-segmented-control">
	        <a class="mui-control-item mui-active" href="#item1">商品详情</a>
	        <a class="mui-control-item" href="#item2">商品评价</a>
	    </div>
    </div>
    <!--图片详情-->
    <div  id='item1' class="mui-control-content mui-active product-imgs">
		<div class="content-box">
			<div class="imgs">
				<img src="../images/product-photo-1.png" alt="" />
				<img src="../images/product-photo-2.png" alt="" />
				<img src="../images/product-photo-3.png" alt="" />
				<img src="../images/product-photo-4.png" alt="" />
				<img src="../images/product-photo-5.png" alt="" />
			</div>
		</div>
	</div>
	<!--评价详情-->
	 <div  id='item2' class="mui-control-content appraise-wrap">
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media">
	            <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p class="goods-color">颜色：豹纹凯特</p>
	                <ul class="evaluation-of-image">
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                </ul>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo1" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo2" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo3" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	                <ul class="evaluation-of-image">
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                	<li><img src="../images/yuexiao_03.png" alt="" /></li>
	                </ul>
	            </div>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo4" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo5" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo6" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo7" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo8" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo9" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		     <li class="mui-table-view-cell mui-media">
		        <div class="mui-pull-left mui-media-object"><img src="../images/head_portrait_03.png"></div>
	            <div class="mui-media-body">
	            	<div class="mui-media-body-title">
	            		<p class="mui-pull-left">瑾晨 <span>2016-09-22</span></p>
	            		<div id="readOnly-demo10" class="star mui-pull-right"></div>
	            	</div>
	                <p class="mui-ellipsis">啊哦哟蛮不错哦，给好评哦！</p>
	                <p>颜色：豹纹凯特</p>
	            </div>
		    </li>
		</ul>
	</div>
	<!--按钮-->
	<div class="buttom-button">
		<div class="red-button">
			<a href="javascript:;">加入购物车</a>
		</div>
		<div class="yellow-button">
			<a href="javascript:;">立即支付</a>
		</div>
	</div>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    </script>
    <!--商品详情图-->
    <script>        
		var mySwiper = new Swiper ('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			// 如果需要分页器
			pagination: {
			  	el: '.swiper-pagination',

			},
		})        
	</script>
	<!--点击收藏-->
	<script>
		function collect(e){
			$("#collect").toggleClass('icon-color');
		}
	</script>
  	<!--商品增加减少按钮-->
  	<script type="text/javascript">
  		$(function(){
  			$('#lower').on('click',function(){
  				var num=parseInt($('#number').val());
  				var reseve=parseInt($('#reseve').text());
  				console.log(reseve);
  				if(num>1){
  					$('#number').val(num-1);
  					$('#reseve').text(reseve+1);
  				}else{
  					$('#number').val(1);
  				}
  			})
  			$('#add').on('click',function(){
  				var num=parseInt($('#number').val());
  				var reseve=parseInt($('#reseve').text());
  				$('#number').val(num+1);
  				$('#reseve').text(reseve-1);
  			})
  		})
  	</script>
	<!--星星-->
	<script type="text/javascript">
	   $(function() {
		    $.fn.raty.defaults.path = '../images';
		   	$('#readOnly-demo').raty({
		        readOnly: true,
		        score: 1
		    });
		    for(var i=1;i<=10;i++){
		    	$('#readOnly-demo'+i).raty({
			        readOnly: true,
			        score: 1
		    	});
		    }
 
		});
  	</script> 
</body>
</html>
